

<template>
  <div>
    <el-container>
      <el-main>
        <div class="goodsImgList-mokuai">
          <!-- 数据模块 -->
          <div class="goodsImgList-index">
            <div class="goodsImgList-index-top">
              <div class="goodsImgList-name">
                <div class="goodsImgList-name-font">
                  <i class="el-icon-s-unfold"></i>
                  数据列表
                </div>
                <div class="freightTemp-index-select">
                  <div class="goodsImgList-left goodsImgList-index-select-button">
                    <el-button @click="onSubmitImg" size="small">添加</el-button>
                  </div>
                  <div class="goodsImgList-left">
                    <el-form :inline="true" :model="listLine" class="demo-form-inline" size="small">
                      <el-form-item label>
                        <el-select
                          v-model="listLine.sort"
                          placeholder="排序方式"
                          class="select-width-2"
                        >
                          <el-option
                            v-for="(row,index) in listLine.sorts"
                            :key="index"
                            :label="row.type"
                            :value="row.value"
                          ></el-option>
                        </el-select>
                      </el-form-item>
                    </el-form>
                  </div>
                </div>
              </div>
              <div class="goodsImgList-content">
                <!-- 数据列表 -->
                <div>
                  <el-table
                    ref="multipleTable"
                    :data="tableData"
                    tooltip-effect="dark"
                    border
                    style="width: 100%"
                    @selection-change="handleSelectionChange"
                  >
                    <el-table-column type="selection" width="55" align="center"></el-table-column>
                    <el-table-column label="编号" width="80" align="center">
                      <template slot-scope="scope">{{ scope.row.id }}</template>
                    </el-table-column>
                    <el-table-column prop="name" label="模板名称" width="120" align="center"></el-table-column>
                    <!-- show-overflow-tooltip ：Vue-Element的show-overflow-tooltip属性使用后空属性值鼠标移动上去提示一个黑色悬浮框 -->
                    <el-table-column label="计价方式" width="90" align="center">
                      <template slot-scope="scope">{{ scope.row.pricingModel |  pricingTypeFilter}}</template>
                    </el-table-column>
                    <el-table-column prop="firstWeight" label="数量" width="90" align="center">
                      <template scope="scope">
                        <span>{{scope.row.firstWeight}}{{ scope.row.pricingModel |  pricingModelTypeFilter}}</span>
                      </template>
                    </el-table-column>
                    <el-table-column prop="firstExpense" label="起步价（元）" width="100" align="center">
                      <!-- <template scope="scope">
                        <span>{{scope.row.firstExpense}}（元）</span>
                      </template>-->
                    </el-table-column>
                    <el-table-column prop="extendWeight" label="增加数量" width="90" align="center">
                      <template scope="scope">
                        <span>{{scope.row.extendWeight}}{{ scope.row.pricingModel | pricingModelTypeFilter }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column prop="extendExpense" label="加价（元）" width="100" align="center">
                      <!-- <template scope="scope">
                        <span>{{scope.row.extendExpense}}（元）</span>
                      </template>-->
                    </el-table-column>
                    <el-table-column prop="region" label="地区" align="center"></el-table-column>
                    <el-table-column prop="time" label="添加时间" width="180" align="center"></el-table-column>

                    <el-table-column label="是否启用" width="100" align="center">
                      <template slot-scope="scope">
                        <!-- :on-value='0' :off-value='1' 中以修改为 :active-value='0' 和 :inactive-value='1' -->
                        <el-switch
                          @change="handleChangeEnabled(scope.row)"
                          v-model="scope.row.enabled"
                          :active-value="0"
                          :inactive-value="1"
                          :disabled="scope.row.state == 1"
                        ></el-switch>
                      </template>
                    </el-table-column>

                    <el-table-column fixed="right" label="操作" width="160" align="center">
                      <template slot-scope="scope">
                        <el-button @click="handleClick(scope.row)" size="mini">编辑</el-button>
                        <!-- <el-button @click="handleDelete(scope.$index, scope.row)" size="mini">删除</el-button> -->
                        <el-button
                          v-show="scope.row.state === '0'"
                          @click="handleDelete(scope.row)"
                          size="mini"
                        >删除</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
                <!-- 页脚 -->
                <div class="goodsImgList-paging">
                  <!-- 批量操作 -->
                  <div class="goodsImgList-paging-leftlayout">
                    <div class="opertation-block">
                      <!-- 全选需要设置方法目前只能操作0，1数据 -->
                      <el-button @click="toggleSelection" size="small">全选</el-button>
                    </div>
                    <div class="opertation-block">
                      <el-form
                        :inline="false"
                        :model="operation"
                        class="demo-form-inline"
                        size="small"
                      >
                        <el-form-item label>
                          <el-select
                            v-model="operation.type"
                            placeholder="批量操作"
                            class="select-width-2"
                          >
                            <el-option
                              v-for="(item,index) in operation.types"
                              :key="index"
                              :label="item.label"
                              :value="item.value"
                            ></el-option>
                          </el-select>
                        </el-form-item>
                      </el-form>
                    </div>
                    <div class="opertation-block">
                      <el-button @click="handleSelection" size="small">确定</el-button>
                    </div>
                  </div>
                  <!-- 分页 -->
                  <div class="goodsImgList-paging-layout">
                    <div class="block">
                      <span class="demonstration"></span>
                      <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="pageNum"
                        :page-sizes="pages"
                        :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="pageTotal"
                      ></el-pagination>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-main>
    </el-container>
  </div>
</template>


<style scoped>
/* 自定义 */
.form-button-center {
  margin-left: 110px;
}
.select-width-2 {
  width: 100px;
}
.goodsImgList-left {
  float: left;
}
.goodsImgList-mokuai {
  height: 1000px;
  background-color: rgb(249, 249, 249);
}
.goodsImgList-index {
  width: 100%;
  margin: auto;
  background-color: rgb(255, 255, 255);
}
.goodsImgList-index-top {
  margin-top: 30px;
}
.goodsImgList-name {
  width: 100%;
  height: 50px;
  padding-top: 10px;
  color: #666666;
  background-color: rgb(240, 240, 240);
}
.goodsImgList-name-font {
  height: 40px;
  line-height: 40px;
  float: left;
  margin-left: 20px;
  font-size: 14px;
}

.freightTemp-index-select {
  width: 300px;
  float: right;
  margin-right: 20px;
  font-size: 14px;
  padding-top: 5px;
}
.goodsImgList-index-select-button {
  margin-right: 20px;
}
.goodsImgList-content {
  width: 100%;
  padding-top: 40px;
}
.goodsImgList-button-select-2 {
  height: 50px;
  padding-top: 10px;
  padding-left: 20px;
}

.opertation-block {
  display: inline-block;
  margin-left: 3px;
}
.goodsImgList-paging {
  height: 50px;
  width: 100%;
  background-color: rgb(253, 253, 254);
}
.goodsImgList-paging-leftlayout {
  float: left;
  margin-top: 7px;
}
.goodsImgList-paging-layout {
  float: right;
  margin-top: 7px;
}
.custom-class {
  width: 30%;
  margin: auto;
}
</style>

<script>
import freightApi from "@/api/settings/freight";

const pricingModelType = [
    {
        type: 0,
        title: "（Kg）"
    },
    {
        type: 1,
        title: "（件）"
    },
];

const pricingType = [
    {
        type: 0,
        title: "重量"
    },
    {
        type: 1,
        title: "件数"
    },
]

export default {
  data() {
    return {
      // 筛选
      listLine: {
        row: "",
        sort: null,
        sorts: [
          {
            type: "模板编号",
            value: 0
          },
          {
            type: "模板名称",
            value: 1
          },
          {
            type: "计价方式",
            value: 2
          },
          {
            type: "模板数量",
            value: 3
          },
          {
            type: "模板起步价",
            value: 4
          },
          {
            type: "模板增加数量",
            value: 5
          },
          {
            type: "模板加价",
            value: 6
          },
          {
            type: "地区",
            value: 7
          },
          {
            type: "添加时间（降序）",
            value: 8
          },
          {
            type: "启用状态（升序）",
            value: 9
          }
        ]
      },

      // 列表数据
      tableData: [],
      operation: {
        type: null,
        types: [
          {
            label: "还原模板",
            value: 0
          },
          {
            label: "删除模板",
            value: 1
          },
          {
            label: "设为启用",
            value: 2
          },
          {
            label: "设为停用",
            value: 3
          }
        ]
      },
      // 分页
      pageNum: 1,
      pageSize: 10,
      pageTotal: null,
      pages: [5, 10, 25, 50]
    };
  },
  methods: {
    // 初始化数据列表
    initData() {
      freightApi
        .pageList(this.pageNum, this.pageSize, this.listLine.sort)
        .then(response => {
          this.tableData = response.data.data.records;
          this.pageTotal = response.data.data.total;
        });
    },
    // 返回
    returnButton() {
      this.$router.replace({ path: "/goods/goodsImage" });
    },
    // 添加
    onSubmitImg() {
      this.$router.replace({ path: "/settings/addTemp" });
    },
    // 数据列表
    toggleSelection() {
      if (this.tableData) {
        this.tableData.forEach(() => {
          // 全选 或 反选
          // this.$refs.multipleTable.toggleRowSelection(row);
          // 全选 或 全不选
          this.$refs.multipleTable.toggleAllSelection();
        });
      } else {
        // 没有数据时 清空用户选择
        this.$refs.multipleTable.clearSelection();
      }
    },
    // 多选改变时处理
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 编辑当前行
    handleClick(row) {
      this.$router.push({ name: "templateInfo", params: { template: row } });
    },
    // 删除 当前行
    handleDelete(row) {
      freightApi.deleteById(row.id).then(() => {
        this.initData();
      });
    },
    // 分页
    // 分页条数变更处理
    handleSizeChange(val) {
      this.pageSize = val;
      this.pageNum = 1;
      this.initData();
    },
    // 当前页变更处理
    handleCurrentChange(val) {
      this.pageNum = val;
      this.initData();
    },
    // 启用状态改变 处理
    handleChangeEnabled(row) {
      freightApi.updateEnabledById(row.id, row.enabled);
    },
    // 批量操作已选择的数据
    handleSelection() {
      // 当最初没选择时this.multipleSelection 为 undefined 选择后清空选择时为[]
      if (this.multipleSelection) {
        if (this.multipleSelection.length > 0 && this.operation.type != null) {
          let ids = [];
          this.multipleSelection.forEach(item => {
            if (!(this.operation.type >= 2 && item.state == 1)) {
              ids.splice(ids.length, 0, item.id);
            }
          });
          freightApi.batchOperation(ids, this.operation.type).then(() => {
            this.initData();
          });
        }
      }
    }
  },
  watch: {
    "listLine.sort": {
      handler: function() {
        this.pageNum = 1;
        this.initData();
      }
    }
  },
  filters: {
      pricingTypeFilter (type) {
          return pricingType.find(o => o.type === type - 0).title
      },
      pricingModelTypeFilter (type){
          return pricingModelType.find(o => o.type === type - 0).title
      }
  },
  created() {
    this.initData();
  }
};
</script>